<template>
	<!--关于-->
	<view class="upload-box" :class="showUploadWin === 0 ? 'none' : showUploadWin === 1 ? 'show' : ''">
		<view class="upload-content">
			<view class="item-fixed-top">
				<view class="title">{{title}}</view>
				<view class="close" @click="closeWin">
					<image src="../../static/images/close.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="a-item">
				<view ref="downTpl" class="down-tpl" @click="downGdsTlp"><text class="d-tpl-txt">{{downTplTxt}}</text><text class="d-desc-txt">{{importCustomTitTip}}</text></view>
				<view class="txt-content">{{upDescTxt1}}</view>
				<view class="txt-content">{{upDescTxt2}}</view>
				<view class="txt-content">{{upDescTxt3}}</view>
				<view class="txt-content">{{upDescTxt4}}</view>
				<view class="txt-content">{{upDescTxt5}}</view>
				<view class="txt-content">{{upDescTxt6}}</view>
				
				<view class="txt-content s-c-box" ref="input">
					<text class="select-fileTxt">{{uploadTxt}}</text>
					<text class="file-txt">{{uploadTipTxt}}</text>
				</view>
			</view>
			<view class="save-box"><text class="s-btn" @click="uploadFile">{{saveTxt}}</text></view>
		</view>
	</view>
</template>

<script>
	import lang from "../../js/conf/Lang.js";
	import config from "../../js/conf/Config.js";
    
	import downloadFile from "../../js/upload/DownloadFile.js";

	export default {
	  	data() {
			return {
				showUploadWin : 0,
				title : lang.customerTxt.importCustomTitle,
				downTplTxt : lang.gdsUpAndDownTxt.upTplTxt,
				upDescTxt : lang.gdsUpAndDownTxt.upDescTxt,
				upDescTxt1 : lang.customerTxt.importCustomDescTxt1,
				upDescTxt2 : lang.customerTxt.importCustomDescTxt2,
				upDescTxt3 : lang.customerTxt.importCustomDescTxt3,
				upDescTxt4 : lang.customerTxt.importCustomDescTxt4,
				upDescTxt5 : lang.customerTxt.importCustomDescTxt5,
				upDescTxt6 : lang.customerTxt.importCustomDescTxt6,
				uploadTxt : lang.gdsUpAndDownTxt.uploadTxt,
				uploadTipTxt : lang.gdsUpAndDownTxt.uploadTipTxt,
				saveTxt : lang.saveTxt,
				
				importCustomTitTip : lang.customerTxt.importCustomTitTip,
				uploadFileSuccessTxt:lang.uploadFileSuccessTxt,
				
				fileData:null,
				example : 1,
				file:null,
			};
		},
		mounted() {
			this.$nextTick(function(){
				this.chooseFile();
			});
		},
		
		methods: {
			/**下载产品模板***/
			downGdsTlp()
			{
				// if(this.showRTBtns)
				// 	downloadFile.downloadCustomTlp();
				// else
				// {
				// 	let url = String(config.host).replace('index.php?/','') + config.CUSTOMER_IMPORT;
				// 	let t = new Date().getTime();
				// 	let fn = lang.customerTxt.customTlpTxt + t + lang.gdsUpAndDownTxt.gdxTlpFileSuffixTxt;
				// 	downloadFile.webDowonloadTlp(url,fn);
				// }
					downloadFile.downloadCustomTlp();

			},
			
			/***上传编辑好的产品模板***/	
			chooseFile()
			{
				var input = document.createElement('input');
				input.style.width = "100%";
				input.type = "file";//添加file类型
				// input.multiple = "multiple"; //可以选择多个
				input.accept = ".xlsx";//限制只能上传PDF文件，可以不限制，能上传任何类型
				input.style.height = "8%";
				input.style.position ="absolute";
				input.style.bottom = "60px";
				input.style.cursor = "pointer";
				input.style.right = "0";
				input.style.opacity="0";
				input.style.overflow="hidden"; //防止注意input 元素溢出
				// input.style.backgroundColor = "#FF3333"
				input.id = 'file';
				let that = this;
				setTimeout(() => {
					this.$refs.input.$el.appendChild(input); // 这里可能会报$el找不到错误，所以加了延时器，报错的原因是this.$refs.input没有找到为null，所以需要等页面结构加载完后再将其添加进去
					input.onchange = (event) => { // 点击上传选择文件
						that.file = event.target.files;
						that.uploadTipTxt = that.file[0].name;
					}
				}, 1000);
			},
			
			uploadAPI(path)
			{
				let that = this;
				let param = {};
				param.customer_import = path;
				param.upload = "1";
				let url = config.host + config.CUSTOMER_IMPORT_SAVE;
				console.log("上传图片！！！");
				downloadFile.uploadAPI(param,url,back);
				
				function back(data)
				{
					that.closeWin();
					that.file = null;
					that.uploadTipTxt = lang.gdsUpAndDownTxt.uploadTipTxt;
					document.getElementById('file').value = "";
					console.log("data=====:",data);
					if(data.status == 1)
					{
						if(!data.data)
						{
							that.$msg({title:lang.errNullTxt,duration:3000});
							return;
						}
						data = data.data;
						let obj = {};
						obj.title = that.uploadFileSuccessTxt;
						obj.content = lang.importTxt1 + data.all_num + lang.importTxt2 + data.success_num +  lang.importTxt3 + data.error_num + lang.importTxt4;
						
						lang.showWin(obj);
					}
					else
					{
						// that.$msg({title:data.msg,duration:3000});
						let obj = {};
						obj.title = lang.errTitTxt;
						obj.content = data.msg;
						lang.showWin(obj);
					}
				}
				return;
			},
		
			/****上传文件*****/
			uploadFile()
			{
				if(this.file)
				{
					this.uploadAPI(this.file[0]);
				}
				else	
				{
					this.$msg({title:"请选择要上传的xlsx文件上传!"});
				}
			},
			
			/***显示关闭***/
			show(type)
			{	
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.showUploadWin = 2;
				setTimeout(() => {
					this.showUploadWin = state;
				}, timer);
			},
			
			/***关闭窗口***/
			closeWin()
			{
				this.show();
			},
		}
	}
</script>
<style lang="scss">
	.upload-box {
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		transition: 0.3s;
		overflow-y: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		.upload-content {
			border-radius: 6px;
			overflow: hidden;
			width: 38%;
			background: #F8F8F8;
			float: right;
			transform: translateY(-100%);
			transition: 0.3s;
			.item-fixed-top
			{
				padding: 10px 0 10px 10px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #FFF;
				font-size: 18px;
				.close
				{
					width: 32px;
					height: 32px;
					text-align: center;
					cursor: pointer;
					image
					{
						width: 14px;
						height: 14px;
					}
				}
				.close:hover
				{
					opacity: .8;
				}
			}
		}
		&.none {
			display: none;
		}
		&.show {
			background: rgba(0, 0, 0, 0.3);
			.upload-content {
				transform: translateY(0);
			}
		}
	}
	
	.a-item{
		margin: 2px 0;
		background: #FFF;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		padding: 10px 20px 10px 10px;
		border-bottom: 1px solid #ECECEC;
		color: #333;
		.down-tpl
		{
			font-size: 13px;
			.d-tpl-txt
			{
				color: #3388ff;
				padding: 5px;
				text-decoration: underline;
				cursor: pointer;
			}
			
			.d-tpl-txt:hover
			{
				opacity: .8;
			}
			.d-desc-txt
			{
				color: #333;
				padding-left: 15px;
			}
		}
		
		.txt-content{
			font-size: 13px;
		}
		.s-c-box
		{
			margin-top : 5px;
			padding-top: 20px;
			padding-left : 0;
			padding-right: 0;
			padding-bottom: 10px;
			border-top: 1px solid #ECECEC;
			// margin-bottom: 5px;
			// border-bottom: 1px solid #ECECEC;
			cursor : pointer;
			.select-fileTxt
			{
				margin-left : 10px;
				padding : 6px;
				background-color : #3388ff;
				border-radius : 4px;
				color : #fff;
			}
			.file-txt
			{
				padding-left: 10px;
				color: #999;
			}
		}
		.s-c-box:hover
		{
			opacity: .8;
		}
	}
	
	.save-box
	{
		width: 100%;
		text-align: center;
		.s-btn
		{
			height : 30px;
			text-align: center;
			line-height: 40px;
			padding: 10px 30px;
			background-color: #3388ff;
			color: #fff;
			border-radius: 4px;
			cursor: pointer;
		}
		.s-btn:hover
		{
			opacity: .8;
		}
	}
</style>